/**
 * #info
 *
 * @author wuwg
 * @createTime 2018/03/20
 * @updateTime   2018/05/08
 * @description module component
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-btn'

/**
 * #item
 *
 * @type aty-button
 * @cn 按钮
 * @order 100
 * @stPlugin true
 * @nameprop text
 * @children [aty-icon,aty-text]
 */
const module = {
  name: config.prefix + '-button',
  props: {
    /**
     * #property
     *
     * @name text
     * @cn 文本
     * @type  string
     * @group 内容
     * @value button
     * @description 按钮内要显示的文本内容
     */
    text: {
      type: String,
      default: 'button'
    },
    /**
     * #property
     *
     * @name  isHtml
     * @cn    是否解析成html
     * @type  boolean
     * @group 内容
     * @value false
     * @description   isHtml=true, 将会解析html标签,默认不解析
     */
    isHtml: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name type
     * @cn 类型
     * @type list
     * @group 样式
     * @options [primary, ghost, dashed, text, info, success, warning, error, default, cancel]
     * @value default
     * @description 按钮的类型，具体类型请参考示例
     */
    type: {
      validator (value) {
        return Artery.isOneOf(value, ['primary', 'ghost', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'default', 'cancel'])
      }
    },
    /**
     * #property
     *
     * @name shape
     * @cn 形状
     * @type list
     * @group 样式
     * @options [circle]
     * @description 可选值为circle或者不设置
     */
    shape: {
      validator (value) {
        return Artery.isOneOf(value, ['circle'])
      }
    },
    /**
     * #property
     *
     * @name long
     * @cn 长按钮
     * @type boolean
     * @group 样式
     * @value false
     * @description 开启后，按钮的长度为 100%
     */
    long: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name loading
     * @cn  加载中
     * @type boolean
     * @group 样式
     * @value false
     * @description 设置按钮为加载中状态
     */
    loading: Boolean,
    /**
     * #property
     *
     * @name disabled
     * @cn 是否无效
     * @type boolean
     * @group 状态
     * @value false
     * @description 设置按钮为禁用状态
     */
    disabled: Boolean,
    /**
     * #property
     *
     * @name htmlType
     * @cn html类型
     * @type list
     * @group 类型
     * @value button
     * @options [button, submit, reset]
     * @description 设置按钮原生的type，可选值为button、submit、reset
     */
    htmlType: {
      default: 'button',
      validator (value) {
        return Artery.isOneOf(value, ['button', 'submit', 'reset'])
      }
    },

    /**
     * #property
     *
     * @name icon
     * @cn 图标名称
     * @type icon
     * @group 样式
     * @description  设置按钮的图标类型
     */
    icon: String
  },
  data () {
    return {
      scope: {
        className: config.prefix + '-button',
        showSlot: true
      }
    }
  },
  computed: {
    // 图标class
    iconClasses () {
      return `${config.prefix + '-icon'} ${config.prefix + '-icon'}-${this.icon}`
    },
    //  加载图标的class
    iconLoadingClasses () {
      return `${config.prefix + '-icon'} ${config.prefix + '-icon-load-c'} ${config.prefix + '-load-loop'}`
    },
    // 按钮class
    classes () {
      return [
                `${prefixCls}`,
                {
                  [`${prefixCls}-${this.type}`]: !!this.type, // 按钮类型
                  [`${prefixCls}-long`]: this.long, // 按钮是否为长按钮
                  [`${prefixCls}-${this.shape}`]: !!this.shape, // 按钮形状
                  [`${prefixCls}-loading`]: this.loading != null && this.loading, //  按钮是否在加载中...
                  [`${prefixCls}-icon-only`]: !this.scope.showSlot && (!!this.icon || this.loading) // 是否为图标按钮
                }
      ]
    }
  },
  methods: {
    /**
     * #event
     *
     * @name click
     * @cn 点击事件
     * @param event click事件
     * @body
     * @description 按钮点击时触发事件
     */
    handleClick (event) {
      this.$el.blur()
      this.$emit('click', event)
    }
  },
  mounted () {
    // 是否显示插槽
    this.scope.showSlot = this.$slots.default !== undefined
  }
}
export default module
